<template>
	<div class="main-wrapper loading">
		<div class="content-box">
			<div class="header-box">
				<span class="breadcrumb-item">笔录详情</span>
				<div class="btns">
					<template v-if="formEdit">
						<el-button size="small" icon="el-icon-refresh" class="default-btn"
							@click="formEdit = false">取消</el-button>
						<el-button size="small" icon="el-icon-search" class="plain-btn" @click="onSave">保存</el-button>
					</template>
					<template v-else>
						<el-button size="small" icon="el-icon-refresh" class="default-btn"
							@click="onEdit">编辑</el-button>
						<el-button size="small" icon="el-icon-back" class="plain-btn"
							@click="$router.back();">返回</el-button>
					</template>

				</div>
			</div>
			<div class="name-title" v-if="infoData">
				{{ ['', '嫌疑人', '受害人'][type] }}-{{ infoData.name }}-{{
          infoData.interviewNumber
        }}笔录
				<div style="cursor: pointer;margin-left: 20px;font-size: 14px;color: #169BD5;" @click="onShowNoteList">
					其他笔录
				</div>
			</div>
			<div class="groupForm">
				<div class="top-wrapper">
					<div class="title">基本信息</div>
					<div class="table-box" v-if="!formEdit">
						<div class="cell" v-for="(item, index) in infoList" :key="'info' + index">
							<div class="label">{{ item.label }}</div>
							<div class="value">{{ item.value }}</div>
						</div>
					</div>
					<div class="table-box" v-else>
						<div class="cell" v-for="(item, index) in infoEditList" :key="'infoEdit' + index">
							<div class="label">{{ item.label }}</div>
							<template v-if="item.label">
								<div class="value" v-if="item.type == 'dateTime'">

									<!-- 笔录时间 -->
									<el-date-picker size="mini" class="value-ipt" value-format="yyyy-MM-dd HH:mm"
										format="yyyy-MM-dd HH:mm" v-model="interviewTimes" type="datetimerange"
										range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
									</el-date-picker>
								</div>
								<div class="value" v-else-if="item.type == 'date'">
									<el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" size="mini"
										v-model="item.value" type="date" placeholder="选择日期">
									</el-date-picker>
								</div>
								<div class="value" v-else-if="item.type == 'nation'">
									<el-select filterable size="mini" class="value-ipt" v-model="item.value"
										placeholder="请选择">
										<el-option v-for="item1 in nation_data" :key="item1.name" :label="item1.label"
											:value="item1.name">
										</el-option>
									</el-select>
								</div>
								<div class="value" v-else-if="item.type == 'sel'">
									<el-select size="mini" class="value-ipt" v-model="item.value" placeholder="请选择">
										<el-option v-for="item1 in item.selList" :key="item1.value" :label="item1.label"
											:value="item1.value">
										</el-option>
									</el-select>
								</div>
								<div class="value" v-else-if="item.type == 'number'"
									style="display: flex;align-items: center;">
									<el-input :maxlength="3" size="mini" class="value-ipt" v-model="item.value"
										placeholder="请输入内容" type="number">
									</el-input>
								</div>
								<div class="value" v-else-if="['caseCode', 'interviewTime'].indexOf(item.key) == -1">
									<el-input :maxlength="item.maxlength ? item.maxlength : 128" size="mini"
										class="value-ipt" v-model="item.value" placeholder="请输入内容"></el-input>
								</div>
								<div class="value" v-else>{{ item.value }}</div>
							</template>
						</div>
					</div>
				</div>
				<div class="top-wrapper" v-if="type == 2">
					<div class="title">扩展信息（受害人）</div>
					<div class="table-box" v-if="!formEdit">
						<div class="cell" v-for="(item, index) in shrList" :key="item.key">
							<div class="label">{{ item.label }}</div>
							<div class="value">{{ item.value }}</div>
						</div>
					</div>
					<div class="table-box" v-else>

						<div class="cell" v-for="(item, index) in shrEditList" :key="'shredit' + item.key">
							<div class="label">{{ item.label }}</div>
							<template v-if="item.label">
								<div class="value" v-if="item.type == 'sel'">
									{{ item.value }}
									<el-select size="mini" class="value-ipt" v-model="item.value" placeholder="请选择">
										<el-option v-for="item1 in item.selList" :key="item1.value" :label="item1.label"
											:value="item1.value">
										</el-option>
									</el-select>
								</div>

								<div class="value" v-else-if="item.type == 'ChinaAreaCascader'">
									<ChinaAreaCascader style="width: 100%;" v-model="item.value" multiple>
									</ChinaAreaCascader>
								</div>
								<div class="value" v-else-if="item.type == 'date'">
									<el-date-picker value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"
										size="mini" v-model="item.value" type="datetime" placeholder="选择日期时间">
									</el-date-picker>
								</div>
								<div class="value" v-else-if="['caseCode', 'interviewTime'].indexOf(item.key) == -1">
									<el-input :maxlength="128" size="mini" class="value-ipt" v-model="item.value"
										placeholder="请输入内容"></el-input>
								</div>
							</template>

						</div>
					</div>
				</div>
				<div class="top-wrapper" v-else-if="type == 1">
					<div class="title">扩展信息（嫌疑人）</div>
					<div class="table-box" v-if="!formEdit">
						<div class="cell" v-for="(item, index) in xyrList" :key="item.key">
							<div class="label">{{ item.label }}</div>
							<div class="value">{{ item.value }}</div>
						</div>
					</div>
					<div class="table-box" v-else>
						<div class="cell" v-for="(item, index) in xyrEditList" :key="'shredit' + item.key">
							<div class="label">{{ item.label }}</div>
							<template v-if="item.label">
								<div class="value" v-if="item.type == 'sel'">
									<el-select size="mini" class="value-ipt" v-model="item.value" placeholder="请选择">
										<el-option v-for="item1 in item.selList" :key="item1.value" :label="item1.label"
											:value="item1.value">
										</el-option>
									</el-select>
								</div>
								<div class="value" v-else-if="item.type == 'number'"
									style="display: flex;align-items: center;">
									<el-input maxlength="128" size="mini" class="value-ipt" v-model="item.value"
										placeholder="请输入内容" type="number">
										<template slot="append">元</template>
									</el-input>
								</div>
								<div class="value" v-else-if="item.type == 'ChinaAreaCascader'">
									<ChinaAreaCascader style="width: 100%;" v-model="item.value" multiple>
									</ChinaAreaCascader>
								</div>
								<div class="value" v-else-if="item.type == 'date'">
									<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
										size="mini" v-model="item.value" type="datetime" placeholder="选择日期时间">
									</el-date-picker>
								</div>
								<div class="value" v-else-if="['caseCode', 'interviewTime'].indexOf(item.key) == -1">
									<el-input maxlength="128" size="mini" class="value-ipt" v-model="item.value"
										placeholder="请输入内容"></el-input>
								</div>
							</template>

						</div>
					</div>
				</div>

				<!-- xyrList -->
				<div class="top-wrapper">
					<div class="title">问答详情</div>
					<div class="wd-box" v-if="!formEdit">
						<div class="cell" v-for="(item, index) in wdList" :key="index">
							<div class="label">问：{{ item.question }}</div>
							<div class="value">答：{{ item.answer }}</div>
						</div>
					</div>
					<div class="wd-box" v-else>
						<div class="cell" v-for="(item, index) in wdEditList" :key="index">
							<div class="label"><label>问：</label><el-input maxlength="200" size="mini" class="value-ipt"
									v-model="item.question" placeholder="请输入内容"></el-input></div>
							<div class="value"><label>答：</label><el-input maxlength="1000" size="mini" class="value-ipt"
									v-model="item.answer" placeholder="请输入内容"></el-input></div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<el-dialog title="笔录列表" center :visible.sync="noteVisible" :close-on-click-modal="false" @close="closeUpload"
			width="650px">
			<div class="noteTypes">
				<span :class="['item', { active: type.value === noteActive }]" @click="handleChangeNoteType(type.value)"
					v-for="type in noteTypes" :key="type.value">{{
            type.label }}</span>
			</div>
			<div class="note-list note-loading">
				<div class="cell" @click="onNote(item)" v-for="(item, index) in noteList" :key="index">
					{{ ['', '嫌疑人', '受害人'][noteActive] }}{{ item.personName }}的{{ item.interviewNumber }}笔录
				</div>
				<div class="empty-box">
					<el-empty description="暂无数据" :image-size="100" v-if="noteList && noteList.length == 0"></el-empty>
				</div>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	var nation_data = [{
			id: 1,
			name: '汉族',
			label: '汉族'
		},
		{
			id: 2,
			name: '蒙古族',
			label: '蒙古族'
		},
		{
			id: 3,
			name: '回族',
			label: '回族'
		},
		{
			id: 4,
			name: '藏族',
			label: '藏族'
		},
		{
			id: 5,
			name: '维吾尔',
			label: '维吾尔族'
		},
		{
			id: 6,
			name: '苗族',
			label: '苗族'
		},
		{
			id: 7,
			name: '彝族',
			label: '彝族'
		},
		{
			id: 8,
			name: '壮族',
			label: '壮族'
		},
		{
			id: 9,
			name: '布依族',
			label: '布依族'
		},
		{
			id: 10,
			name: '朝鲜族',
			label: '朝鲜族'
		},
		{
			id: 11,
			name: '满族',
			label: '满族'
		},
		{
			id: 12,
			name: '侗族',
			label: '侗族'
		},
		{
			id: 13,
			name: '瑶族',
			label: '瑶族'
		},
		{
			id: 14,
			name: '白族',
			label: '白族'
		},
		{
			id: 15,
			name: '土家族',
			label: '土家族'
		},
		{
			id: 16,
			name: '哈尼族',
			label: '哈尼族'
		},
		{
			id: 17,
			name: '哈萨克族',
			label: '哈萨克族'
		},
		{
			id: 18,
			name: '傣族',
			label: '傣族'
		},
		{
			id: 19,
			name: '黎族',
			label: '黎族'
		},
		{
			id: 20,
			name: '傈僳族',
			label: '傈僳族'
		},
		{
			id: 21,
			name: '佤族',
			label: '佤族'
		},
		{
			id: 22,
			name: '畲族',
			label: '畲族'
		},
		{
			id: 23,
			name: '高山族',
			label: '高山族'
		},
		{
			id: 24,
			name: '拉祜族',
			label: '拉祜族'
		},
		{
			id: 25,
			name: '水族',
			label: '水族'
		},
		{
			id: 26,
			name: '东乡族',
			label: '东乡族'
		},
		{
			id: 27,
			name: '纳西族',
			label: '纳西族'
		},
		{
			id: 28,
			name: '景颇族',
			label: '景颇族'
		},
		{
			id: 29,
			name: '柯尔克孜族',
			label: '柯尔克孜族'
		},
		{
			id: 30,
			name: '土族',
			label: '土族'
		},
		{
			id: 31,
			name: '达翰尔族',
			label: '达翰尔族'
		},
		{
			id: 32,
			name: '么佬族',
			label: '么佬族'
		},
		{
			id: 33,
			name: '羌族',
			label: '羌族'
		},
		{
			id: 34,
			name: '布朗族',
			label: '布朗族'
		},
		{
			id: 35,
			name: '撒拉族',
			label: '撒拉族'
		},
		{
			id: 36,
			name: '毛南族',
			label: '毛南族'
		},
		{
			id: 37,
			name: '仡佬族',
			label: '仡佬族'
		},
		{
			id: 38,
			name: '锡伯族',
			label: '锡伯族'
		},
		{
			id: 39,
			name: '阿昌族',
			label: '阿昌族'
		},
		{
			id: 40,
			name: '普米族',
			label: '普米族'
		},
		{
			id: 41,
			name: '塔吉克族',
			label: '塔吉克族'
		},
		{
			id: 42,
			name: '怒族',
			label: '怒族'
		},
		{
			id: 43,
			name: '乌孜别克族',
			label: '乌孜别克族'
		},
		{
			id: 44,
			name: '俄罗斯族',
			label: '俄罗斯族'
		},
		{
			id: 45,
			name: '鄂温克族',
			label: '鄂温克族'
		},
		{
			id: 46,
			name: '德昂族',
			label: '德昂族'
		},
		{
			id: 47,
			name: '保安族',
			label: '保安族'
		},
		{
			id: 48,
			name: '裕固族',
			label: '裕固族'
		},
		{
			id: 49,
			name: '京族',
			label: '京族'
		},
		{
			id: 50,
			name: '塔塔尔族',
			label: '塔塔尔族'
		},
		{
			id: 51,
			name: '独龙族',
			label: '独龙族'
		},
		{
			id: 52,
			name: '鄂伦春族',
			label: '鄂伦春族'
		},
		{
			id: 53,
			name: '赫哲族',
			label: '赫哲族'
		},
		{
			id: 54,
			name: '门巴族',
			label: '门巴族'
		},
		{
			id: 55,
			name: '珞巴族',
			label: '珞巴族'
		},
		{
			id: 56,
			name: '基诺族',
			label: '基诺族'
		},

	];

	import {
		sandbox,
		addRule
	} from '@/libs/util'
	import groupForm from '@/mixins/groupForm.js'
	import ChinaAreaCascader from './ChinaAreaCascader.vue'
	export default {
		name: "groupForm",
		mixins: [groupForm],
		components: {
			ChinaAreaCascader
		},
		props: {
			groupType: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				nation_data,
				noteVisible: false, //笔录列表弹窗显示/隐藏
				noteTypes: [{
						label: '嫌疑人',
						value: 1
					},
					{
						label: '受害人',
						value: 2
					},
				],
				noteActive: 1, // 默认选中的笔录类型
				noteList: [],

				formEdit: false, //编辑状态
				type: 1,
				infoEditList: [], //编辑信息
				shrEditList: [], //受害人编辑信息
				wdEditList: [], //问答编辑信息
				xyrEditList: [],
				infoList: [{
						key: 'caseCode',
						value: '',
						label: '案件编号'
					},
					{
						key: 'interviewTime',
						value: '',
						label: '笔录时间',
						type: 'dateTime'
					},
					{
						key: 'interviewLocation',
						value: '',
						label: '笔录地点'
					},
					{
						key: 'interviewNumber',
						value: '',
						label: '笔录次数',
						type: 'sel',
						selList: [{
							value: '第一次',
							label: '第一次'
						}, {
							value: '第二次',
							label: '第二次'
						}, {
							value: '第三次',
							label: '第三次'
						}, {
							value: '第四次',
							label: '第四次'
						}, {
							value: '第五次',
							label: '第五次'
						}]
					},
					{
						key: 'name',
						value: '',
						label: '嫌疑人'
					},
					{
						key: 'sex',
						value: '',
						label: '性别',
						type: 'sel',
						selList: [{
							value: '男',
							label: '男'
						}, {
							value: '女',
							label: '女'
						}]
					},
					{
						key: 'birthday',
						value: '',
						label: '出生日期',
						type: 'date'
					},
					{
						key: 'age',
						value: '',
						label: '年龄（笔录时）',
						type: 'number',
						maxlength: 3
					},
					{
						key: 'nation',
						value: '',
						label: '民族',
						type: 'nation'
					},
					{
						key: 'permanentAddress',
						value: '',
						label: '常住地址'
					},
					{
						key: 'nativePlace',
						value: '',
						label: '户籍所在地'
					},
					{
						key: 'idCardNumber',
						value: '',
						label: '身份证号码',
						maxlength: 18
					},
				],

				shrList: [{
						key: 'happenedTime',
						value: '',
						label: '案件发生时间',
						type: 'date',
					},
					{
						key: 'crimePlace',
						value: '',
						label: '案件发生地点'
					},
					{
						key: 'reportingMethod',
						value: '',
						label: '报案方式'
					},
					{
						key: 'communicationTool',
						value: '',
						label: '沟通工具'
					},
					{
						key: 'degreeOfEducation',
						value: '',
						label: '教育情况',
						type: 'sel',
						selList: [{
							value: '未接受教育',
							label: '未接受教育'
						}, {
							value: '小学',
							label: '小学'
						}, {
							value: '初中',
							label: '初中'
						}, {
							value: '本科',
							label: '本科'
						}, {
							value: '硕士及以上',
							label: '硕士及以上'
						}]
					},
					{
						key: 'familyInfo',
						value: '',
						label: '家庭情况'
					},
					{
						key: 'work',
						value: '',
						label: '职业'
					},
					{
						key: 'resistanceSituation',
						value: '',
						label: '反抗情况'
					},
					{
						key: 'beBullied',
						value: '',
						label: '是否被霸凌',
						type: 'sel',
						selList: [{
							value: true,
							label: '是'
						}, {
							value: false,
							label: '否'
						}]
					},
					{
						key: 'psychologicStatus',
						value: '',
						label: '心理状况'
					},
					{
						key: 'physicalCharacteristic',
						value: '',
						label: '体貌特征'
					},
					{
						key: 'murderedPlace',
						value: '',
						label: '被害地点'
					},
					{
						key: 'murderedArea',
						value: '',
						label: '被害区域',
						type: 'ChinaAreaCascader'
					},
					{
						key: 'transfer',
						value: '',
						label: '是否转账',
						type: 'sel',
						selList: [{
							value: true,
							label: '是'
						}, {
							value: false,
							label: '否'
						}]
					},
					{
						key: 'studySituation',
						value: '',
						label: '学习情况'
					},
					{
						key: 'haveBeenHurt',
						value: '',
						label: '曾受伤害'
					},
					{
						key: 'singleParent',
						value: '',
						label: '是否单亲家庭',
						type: 'sel',
						selList: [{
							value: true,
							label: '是'
						}, {
							value: false,
							label: '否'
						}]
					},
					{
						key: 'childrenLeftBehind',
						value: '',
						label: '是否留守儿童',
						type: 'sel',
						selList: [{
							value: true,
							label: '是'
						}, {
							value: false,
							label: '否'
						}]
					},
					{
						key: 'relationWithTheSuspect',
						value: '',
						label: '与嫌疑人关系'
					},
					{
						key: 'dressUp',
						value: '',
						label: '穿着'
					},
					{
						key: 'makeUp',
						value: '',
						label: '是否化妆',
						type: 'sel',
						selList: [{
							value: true,
							label: '是'
						}, {
							value: false,
							label: '否'
						}]
					},
					{
						key: '',
						value: '',
						label: ''
					},
				],
				xyrList: [{
						key: 'work',
						value: '',
						label: '职业',
					},
					{
						key: 'priorConvictions',
						value: '',
						label: '涉案前科',
						type: 'sel',
						selList: [{
							value: true,
							label: '是'
						}, {
							value: false,
							label: '否'
						}]
					},
					{
						key: 'deputyToNpc',
						value: '',
						label: '是否人大代表',
						type: 'sel',
						selList: [{
							value: true,
							label: '是'
						}, {
							value: false,
							label: '否'
						}]
					},
					{
						key: 'threatenWithVictim',
						value: '',
						label: '是否威胁受害人',
						type: 'sel',
						selList: [{
							value: true,
							label: '是'
						}, {
							value: false,
							label: '否'
						}]
					},
					{
						key: 'seriousDisease',
						value: '',
						label: '重大疾病',
					},
					{
						key: 'crimePlace',
						value: '',
						label: '作案地点',
					},
					{
						key: 'bodyTrait',
						value: '',
						label: '体貌特征',
					},
					{
						key: 'transfer',
						value: '',
						label: '是否转账',
						type: 'sel',
						selList: [{
							value: true,
							label: '是'
						}, {
							value: false,
							label: '否'
						}]
					},
					{
						key: 'transferAmount',
						value: '',
						label: '转账金额',
						type: 'number'
					},
					{
						key: 'singleParent',
						value: '',
						label: '是否单亲家庭',
						type: 'sel',
						selList: [{
							value: true,
							label: '是'
						}, {
							value: false,
							label: '否'
						}]
					},
					{
						key: 'leftBehindChildrenOrNot',
						value: '',
						label: '是否留守儿童',
						type: 'sel',
						selList: [{
							value: true,
							label: '是'
						}, {
							value: false,
							label: '否'
						}]
					},
					{
						key: 'relationWithTheVictim',
						value: '',
						label: '与被害人关系',
					},
					{
						key: 'crimeArea',
						value: '',
						label: '作案区域',
						type: 'ChinaAreaCascader'
					},
					{
						key: 'tatoo',
						value: '',
						label: '纹身情况',
					},
					{
						key: 'knowTheVictimMethod',
						value: '',
						label: '认识受害人途径',
					},
					{
						key: 'happenedTime',
						value: '',
						label: '曾受伤害',
					},
				],
				wdList: [],
				infoData: null,
				interviewTimes: [], //时间
				victimId: '', //受害人
				suspectId: '', //嫌疑人
				caseInfoId: '', //案件信息id
				id: ''

			}
		},
		watch: {
			mode(val) {},
		},
		mounted() {
			//console.log('router--->',this.$router)
			this.type = this.$route.query.type
			this.id = this.$route.query.id
			this.loadDetail();
			this.infoList[4].label = ['', '嫌疑人', '受害人'][this.type]
		},
		methods: {
			onShowNoteList() {
				this.noteVisible = true;
				this.$nextTick(() => {
					this.loadNoteList();
				})
			},
			// 点击笔录
			onNote(row) {
				this.type = this.noteActive;
				this.id = row.id
				this.loadDetail();
			},
			loadNoteList() {
				const loading = this.$loading({
					target: document.querySelector('.note-loading'),
					text: 'Loading',
					spinner: 'el-icon-loading',
				});
				this.noteList = null
				this.$api
					.api_urcap_caseNote_list({
						body: {
							caseCode: this.$route.query.code
						},
						param: {
							noteType: ['', 'suspect', 'victim'][this.noteActive]
						}
					})
					.then(res => {
						loading.close();
						this.noteList = []
						if (res.code != 1000) {
							return this.$message({
								type: 'error',
								message: res.message
							})
						}
						this.noteList = res.data;
					})
			},
			// 切换笔录类型
			handleChangeNoteType(type) {
				if (this.noteActive === type) return;
				this.noteActive = type;
				//this.noteVisible = false;
				this.loadNoteList();
			},
			closeUpload() {
				this.noteVisible = false;
			},
			onSave() {
				let formData = {
					id: this.id
				}
				let victim = {},
					suspect = {}
				// 案件信息
				let caseInfo = {}

				this.infoEditList.map(item => {
					formData[item.key] = item.value
					if (this.type == 2) {
						victim[item.key] = item.value

					} else if (this.type == 1) {
						suspect[item.key] = item.value
					}
				})
				if (this.type == 2) {
					this.shrEditList.map(item => {
						victim[item.key] = item.value
						// 案件信息
						if (['crimePlace', 'happenedTime', 'reportingMethod'].indexOf(item.key) > -1) {
							caseInfo[item.key] = item.value
						}

					})
				} else if (this.type == 1) {
					this.xyrEditList.map(item => {
						suspect[item.key] = item.value
					})
				}

				formData['interviewTime'] = this.interviewTimes[0] + ' ' + this.interviewTimes[1]
				if (this.type == 2) {
					victim['id'] = this.victimId;
					victim['murderedArea'] = victim['murderedArea'] && victim['murderedArea'].join(',') || '';
					formData['victim'] = victim
				} else if (this.type == 1) {
					suspect['id'] = this.suspectId;
					suspect['crimeArea'] = suspect['crimeArea'] && suspect['crimeArea'].join(',') || '';
					formData['suspect'] = suspect
				}

				caseInfo['id'] = this.caseInfoId
				formData['caseInfo'] = caseInfo

				formData['interviewDetails'] = this.wdEditList

				formData['id'] = this.id
				console.log(formData);
				this.$api
					.api_urcap_caseNote_edit({
						body: formData
					})
					.then(res => {
						if (res.code != 1000) {
							return this.$message({
								type: 'error',
								message: res.message
							})
						}
						this.formEdit = false;
						this.$message({
							type: 'success',
							message: res.message
						})
						this.loadDetail();
					})

			},
			onEdit() {
				this.formEdit = true;
				this.infoEditList = JSON.parse(JSON.stringify(this.infoList));
				this.shrEditList = JSON.parse(JSON.stringify(this.shrList));
				this.wdEditList = JSON.parse(JSON.stringify(this.wdList));
				this.xyrEditList = JSON.parse(JSON.stringify(this.xyrList));

				// birthday

				this.shrEditList.map(item => {
					if (item.type == 'sel') {
						console.log('item', item.label, item.key, item.value);
						if (item.value == '是' || item.value == '否') {
							item.value = item.value == '是' ? true : false
						}
					}
					if (item.key == 'murderedArea') {
						item.value = item.value?.split(",") || []
					}
				})
				this.xyrEditList.map(item => {
					if (item.type == 'sel') {
						if (item.value == '是' || item.value == '否') {
							item.value = item.value == '是' ? true : false
						}
					}
					if (item.key == 'crimeArea') {
						item.value = item.value?.split(",") || []
					}
				})
				console.log('this.shrEditList', this.shrEditList);


				// this.infoEditList = JSON.parse(JSON.stringify(this.infoList));

			},
			loadDetail() {
				this.noteVisible = false;
				// api_urcap_listNoteDetail
				const loading = this.$loading({
					// lock: true,
					target: document.querySelector('.loading'),
					text: 'Loading',
					spinner: 'el-icon-loading',
					// background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api
					.api_urcap_noteDetail({
						body: {
							caseNoteId: this.id
						}
					})
					.then(res => {
						loading.close();
						if (res.code != 1000) {
							return this.$message({
								type: 'error',
								message: res.message
							})
						}
						this.infoData = res.data;
						this.wdList = res.data.interviewDetails || []
						this.caseInfoId = res.data.caseInfo?.id;
						if (this.type == 2) {
							this.infoData['name'] = res.data.victim.name;
							this.victimId = res.data.victim.id;
							let infoObj = {
								...{},
								...res.data,
								...res.data.caseInfo,
								...res.data.victim
							}
							console.log('infoObj', infoObj);

							this.shrList.map(item => {
								if (item.key) {
									if (typeof(infoObj[item.key]) == 'boolean') {
										item.value = infoObj[item.key] ? '是' : '否'
									} else if (infoObj[item.key] == 'true' || infoObj[item.key] == 'false') {
										item.value = infoObj[item.key] == 'true' ? '是' : '否'
									} else {
										item.value = infoObj[item.key]
									}
								}
							})
							this.infoList.map(item => {
								if (item.key) {
									item.value = infoObj[item.key]
								}
								if (item.key == 'interviewTime') {
									this.interviewTimes = []
									if(infoObj[item.key]){
										let timeList = infoObj[item.key].split(" ") || [];
										if (timeList.length == 4) {
											this.interviewTimes = [timeList[0] + ' ' + timeList[1], timeList[2] +
												' ' + timeList[3]
											] || []
										
										}
									}
									
								}
							})
						} else if (this.type == 1) {
							this.infoData['name'] = res.data.suspect.name;
							this.suspectId = res.data.suspect.id;
							let infoObj = {
								...{},
								...res.data,
								...res.data.caseInfo,
								...res.data.suspect
							}


							this.infoList.map(item => {
								if (item.key) {
									item.value = infoObj[item.key]
								}
								if (item.key == 'interviewTime' ) {
									this.interviewTimes = []
									if(infoObj[item.key]){
										let timeList = infoObj[item.key].split(" ") || [];
										if (timeList.length == 4) {
											this.interviewTimes = [timeList[0] + ' ' + timeList[1], timeList[2] +
												' ' + timeList[3]
											] || []
										
										}
									}
									
								}
							})

							this.xyrList.map(item => {
								if (item.key) {
									if (typeof(infoObj[item.key]) == 'boolean') {
										item.value = infoObj[item.key] ? '是' : '否'
									} else if (infoObj[item.key] == 'true' || infoObj[item.key] == 'false') {
										item.value = infoObj[item.key] == 'true' ? '是' : '否'
									} else {
										item.value = infoObj[item.key]
									}
								}
							})

						}
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-box {
		background-color: #fff;
		padding: 16px;
		margin-bottom: 100px;

		.header-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.main-wrapper {
		max-width: calc(100vw - 220px);
		height: 100%;
		overflow-y: auto;
		padding: 15px 15px 0 15px;
		box-sizing: border-box;
	}

	.wd-box {
		.cell {
			margin-bottom: 10px;

			.label {
				background-color: rgba(242, 242, 242, 1);
				padding: 16px 20px;
				display: flex;
				align-items: center;
			}

			.value {
				background-color: rgba(129, 211, 248, 0.666666666666667);
				padding: 16px 20px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.name-title {
		text-align: center;
		display: flex;
		font-size: 20px;
		justify-content: center;
		align-items: center;
	}

	.groupForm {
		height: calc(100% - 240px);

		.title {
			font-weight: 500;
			font-size: 18px;
			color: #333333;
			line-height: 18px;
			border-left: 4px solid #0B085F;
			padding-left: 16px;
			margin-bottom: 20px;
		}
	}

	.top-wrapper {
		box-sizing: border-box;
		padding: 20px 20px 0 20px;
		background: #FFFFFF;
		border-radius: 8px 8px 8px 8px;
		border: 2px solid #FFFFFF;
	}

	.table-box {
		display: flex;
		flex-wrap: wrap;

		.cell {
			width: 45%;
			border-top: 1px solid #000;
			display: flex;
			align-items: center;

			&:nth-last-child(-n + 2) {
				border-bottom: 1px solid #000;
			}

			&:nth-child(2n) {
				border-right: 1px solid #000;
			}

			.value-ipt {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;

				::v-deep(.el-input__inner) {
					border: none;
					height: 28px;
					line-height: 28px;
					text-align: center;
					margin-top: 1px;
					display: block;
				}
			}

			.label,
			.value {
				width: 50%;
				min-height: 30px;
				height: 100%;
				line-height: 1;
				padding-left: 10px;
				text-align: center;
				position: relative;
				display: flex;
				align-items: center;
			}

			.label {
				background-color: #f2f2f2;
				border-right: 1px solid #000;
				border-left: 1px solid #000;
				width: 40%;
			}

			.value {
				font-size: 13px;
			}
		}
	}

	.bot-wrapper {
		box-sizing: border-box;
		padding: 20px;
		margin-top: 20px;
		height: 100%;
		background: rgba(255, 255, 255, 0.502);
		border-radius: 8px 8px 8px 8px;
		border: 2px solid #FFFFFF;
		overflow-y: auto;

		.type-tag-wrap {
			display: flex;
			flex-wrap: wrap;

			.tag {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 120px;
				height: 120px;
				background: #FFFFFF;
				border-radius: 20px 20px 20px 20px;
				border: 1px solid #DCE1E4;
				margin-right: 25px;
				margin-bottom: 25px;
				color: #D4D4D4;
			}

			.tag-add {
				font-size: 40px;
			}
		}

		.second-title {
			font-size: 18px;
			line-height: 18px;
			margin: 30px 0 15px 0;
		}

		.tabs {
			display: flex;

			.tab-item {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				width: 400px;
				height: 100px;
				padding: 0 18px;
				font-size: 18px;
				line-height: 18px;
				background: #FFFFFF;
				border-radius: 8px;
				border: 1px solid #DCE1E4;
				margin-right: 16px;
				cursor: pointer;

				span {
					color: #666666;
				}

				.text {
					margin: 0 16px;
					font-size: 20px;
				}
			}

			.tab-item-active {
				border: 1px solid #2774F4;
			}
		}
	}

	.button-wrapper {
		margin-top: 30px;
		padding-top: 15px;
		border-top: 1px solid #DCE1E4;

		.btn {
			width: 120px;
			height: 46px;
			border-radius: 8px;
		}
	}


	.noteTypes {
		display: flex;
		justify-content: center;

		.item {
			width: 90px;
			padding: 5px 0;
			border-radius: 3px;
			background-color: #fff;
			text-align: center;
			border: 1px solid rgba(140, 140, 140, 1);
			cursor: pointer;

			&.active {
				background-color: #2774F4;
				color: #fff;
				border: 1px solid #2774F4;
			}

			&:first-child {
				border-right: none;
				border-radius: 3px 0 0 3px;
			}

			&:last-child {
				border-left: none;
				border-radius: 0 3px 3px 0;
			}
		}
	}

	.note-list {
		min-height: 200px;
		margin-top: 20px;

		.empty-box {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
		}

		.cell {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 10px 0;
			color: #02A7F0;
			cursor: pointer;
		}
	}
</style>